ajax 请求

语法：在jq框架中使用jQuery.ajax(url,JSONSettings)方法来实现请求的发送和接收。

jQuery.ajax(url,json);
$.ajax(url,json);

参数说明

(1)请求类型：type
      参数重要性：必要参数
      参数值类型：字符串
      参数可选值：get、post

(2)请求地址：url
      参数重要性：必要参数
      参数值类型：字符串
      参数说明：如果在json参数中写明本属性，则ajax函数的第一个参数就可以不写

(3)响应类型：dataType
      参数重要性：必要参数
      参数值类型：字符串
      参数可选值：json、xml、html、jsonp等等..我们只用json

(4)post数据包：data
      参数重要性：可选参数，但post请求下一般为必要参数
      参数值类型：json
      参数说明：本参数是专门提供给post请求服务的，
                因为post请求不会将数据直接拼接在url地址中，
                因此通过本属性将数据添加到请求内部。

(5)回调函数：success、error、beforeSend
      参数重要性：可选参数
      参数值类型：函数
      参数说明：success属性对应的函数会在请求完成后自动发生回调
                error属性对应的函数会在请求发生错误后（发生错误指的是网络错误、链接失败或者url地址违
                法）自动发生回调
                beforeSend属性对应的函数会在请求发送出之前自动发生回调

get 无参请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson7</title>
</head>
<body>
<button>get无参请求</button>
<ul></ul>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    var ul = document.querySelector('ul');
    $('button').click(function () {
        $.ajax({
            "type":"get",
            "url":"http://wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php",
            "dataType":"json",
            "success":function (response) {
                //console.log(response.banner);
                for(var i=0;i<response.banner.length;i++){
                    //console.log(response.banner[i]);
                    var li = document.createElement('li');
                    ul.appendChild(li);
                    var pTitle = document.createElement('p');
                    pTitle.innerHTML = response.banner[i].title;
                    li.appendChild(pTitle);
                    var pcont = document.createElement('p');
                    pcont.innerHTML = response.banner[i].content;
                    li.appendChild(pcont);
                    var img = document.createElement('img');
                    img.src = response.banner[i].img;
                    li.appendChild(img);
                }
            }
        });
    });
</script>
</body>
</html>

get 有参请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson7</title>
</head>
<body>
<button>get无参请求</button>
<ul></ul>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            "type":"get",
            "url":"http://wwtliu.com/sxtstu/news/juhenews.php?type=yule&count=10",
            "dataType":"json",
            "success":function (response) {
                console.log(response);
            }
        });
    });
</script>
</body>
</html>

post 请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson7</title>
</head>
<body>
<button>get无参请求</button>
<ul></ul>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            "type":"post",
            "url":"http://wwtliu.com/sxtstu/blueberrypai/login.php",
            "dataType":"json",
            "data":{
                user_id:"iwen@qq.com",
                password:"iwen1232",
                verification_code:"crfvw"
            },
            "success":function (data) {
                console.log(data);
            },
            "error":function (error) {
                console.log(error);
            },
            // 在请求发送前调用
            "beforeSend":function () {
                console.log('这里是请求发送出去前的最后一步！');
            }
        });
    });
</script>
</body>
</html>

更多详细的参数参考：https://www.jquery123.com/jQuery.ajax/